<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .btn-outline-black {
            color: black;
            background-color: transparent;
            background-image: none;
            border-color: black;
            border-radius: 30px !important;
        }</style>
</head>
<body>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">个人中心</div>
        <div class="panel-body" id="userInfo">

        </div>
    </div>
    <a class="btn btn-lg btn-outline-black" href="ClientRecharge.html" role="button">充值</a>
    <a class="btn btn-lg btn-outline-black" href="ClientBookList.html" role="button">图书馆</a>
    <a class="btn btn-lg btn-outline-black" href="ClientEdit.html" role="button">修改信息</a>
    <a class="btn btn-lg btn-outline-black" href="ClientReturn.html" role="button">还书</a>
    <a class="btn btn-lg btn-outline-black" href="index.html">退出登录</a>
</div>

<script src="static/js/jquery.js" type="text/javascript"></script>
<script src="static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
    // 获取用户信息并显示在页面上
    $(document).ready(function () {
        console.log("begin");
        $.ajax({
            url: "ClientMainServlet", // 替换成获取用户信息的接口地址
            type: "GET",
            dataType: "json",
            success: function (response) {

                console.log(response)
                const userInfoHtml = "" +
                    "<p>用户名：" + response.account + "</p>" +
                    "<p>昵称：" + response.name + "</p>" +
                    "<p>注册时间：" + response.registrationTime + "</p>" +
                    "<p>余额：" + response.amount + "</p>" +
                    "<p>消费：" + response.consumption + "</p>" +
                    "<p>会员等级：" + response.member + "</p>";
                $("#userInfo").html(userInfoHtml);

            },
            error: function () {
// 处理错误情况
            }
        });
    });
</script>
</body>
</html>